<template>
  <div class="box">
    <!-- 头部 -->
    <div class="box-hd">
      <h2 class="title-div">
        <span class="fl">科目类别</span>
        <div class="fr">
          <el-button type="primary" size="small" @click="dialogAdd=true">新增类别</el-button>
        </div>
      </h2>
    </div>
    <!-- 内容区 -->
    <div class="box-bd p30">
      <!-- 列表数据 -->
      <el-table
        :data="tableData"
        row-key="id"
        border
        lazy
        v-loading="loading"
        :tree-props="{children: 'children'}"
      >
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row.id)">编辑</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 科目类别新增 -->
    <el-dialog
      title="新增科目类别"
      :visible.sync="dialogAdd"
      width="500px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <category-add @changeState="dialogAdd=$event" @reload="initTableData"></category-add>
    </el-dialog>
    <!-- 科目类别编辑 -->
    <el-dialog
      title="编辑科目类别"
      :visible.sync="dialogEdit"
      width="500px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <category-edit ref="editDialog" @changeState="dialogEdit=$event" @reload="initTableData"></category-edit>
    </el-dialog>
  </div>
</template>
<script>
import { findList, del } from '@/api/category'
import CategoryAdd from './category-add.vue'
import CategoryEdit from './category-edit.vue'

export default {
  components: {
    CategoryAdd,
    CategoryEdit
  },
  data() {
    return {
      companyId: this.$store.state.user.companyId,
      dialogAdd: false,
      dialogEdit: false,
      tableData: [],
      loading: false
    }
  },
  mounted() {
    this.initTableData()
  },
  methods: {
    initTableData() {
      this.loading = true
      let params = { companyId: this.companyId, type: 0 }
      findList(params).then(res => {
        this.tableData = res.data
        this.loading = false
      })
    },
    edit(id) {
      this.dialogEdit = true
      let _this = this
      this.$nextTick(() => {
        _this.$refs.editDialog.initDialogData(id)
      })
    },
    del(row) {
      del(row).then(res => {
        this.$message.info(res.message)
        this.initTableData()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.hd-title {
  color: #909399;
  font-size: 14px;
  height: 35px;
}
.box-bd {
  .side-bar {
    padding: 25px;
  }
  .table-list {
    margin-bottom: 15px;
  }
  .list-box {
    li {
      height: 30px;
      line-height: 30px;
    }
  }
}
.tab-nav {
  margin-bottom: 15px;
  margin-left: 100px;
  li {
    float: left;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    margin: 0 25px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    &.active {
      border-bottom-color: #1989fa;
      color: #1989fa;
    }
  }
}
</style>
